<template>
  <view class="Search">
    <view class="topSearch">
      <view class="inputBox">
        <image src="../../static/icons/search.png" class="icon"></image>
        <input
          type="text"
          class="inputText"
          v-model="searchContent"
          :placeholder="searchList[searchType]"
          @confirm="handleSearchContent"
        />
      </view>
    </view>
    <view class="userList" v-if="searchFlag">
      <view class="title">查询结果</view>
      <SearchPeopleList v-if="searchType === 0" />
      <SearchDiscussionList v-else-if="searchType === 1" />
      <SearchTeamList v-else />
    </view>
    <view class="content" v-else>
      <view class="history">
        <view class="head">
          <view class="title">历史搜索</view>
          <image
            src="../../static/icons/trash.png"
            class="icon"
            @click="clearHistory"
          ></image>
        </view>

        <view class="historyList" v-if="historyList.length">
          <view
            class="history-item"
            v-for="(item, index) in historyList"
            @click="handleClickHistory(item)"
            :key="index"
            >{{ item }}</view
          >
        </view>
        <EmptyBox v-else />
      </view>
      <view class="newList">
        <view class="title">{{ titleList[searchType] }}</view>
        <SearchPeopleList v-if="searchType === 0" />
        <SearchDiscussionList v-else-if="searchType === 1" />
        <SearchTeamList v-else />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import SearchPeopleList from "./components/SearchPeopleList.vue";
import SearchDiscussionList from "./components/SearchDiscussionList.vue";
import SearchTeamList from "./components/SearchTeamList.vue";
import EmptyBox from "../../components/public/EmptyBox.vue";
export default {
  components: {
    SearchPeopleList,
    SearchDiscussionList,
    SearchTeamList,
    EmptyBox,
  },
  data() {
    return {
      currentTeam: {},
      historyList: [],
      searchContent: "",
      searchFlag: false,
      titleList: ["推荐伙伴", "推荐讨论", "推荐队伍"],
      searchList: ["搜索伙伴", "搜索讨论", "搜索队伍"],
      recommandState: {
        recommandPeople: [],
        recommandDiscussion: [],
        recommandTeam: [],
      },
      searchType: 0,
    };
  },

  computed: {
    ...mapState("m_search", [
      "searchUserList",
      "searchDiscussionList",
      "searchTeamList",
    ]),
  },

  onLoad(options) {
    this.searchType = Number(options.type);
    this.getHistoryList(this.searchType);
    this.getDataList(this.searchType);
  },
  watch: {
    searchFlag(newValue) {
      if (newValue) {
        this.saveSearchToCache(this.searchType);
        this.searchDataList(this.searchType);
      }
    },
    // 监听搜索内容，为空则更改页面
    searchContent(newValue) {
      if (!newValue.length) {
        this.commitRecommandData(this.searchType);
        this.searchFlag = false;
      }
    },
  },
  methods: {
    // 搜索逻辑
    handleSearchContent() {
      this.saveRecommandData(this.searchType);
      this.searchFlag = true;
    },
    // 点击历史记录
    handleClickHistory(content) {
      this.searchContent = content;
      this.handleSearchContent();
    },

    // 清空历史记录
    clearHistory() {
      wx.showModal({
        title: "确认要清空历史记录吗?",
        success: () => {
          this.historyList = [];
          wx.setStorageSync("searchInvite", JSON.stringify([]));
        },
      });
    },

    // 获取数据
    getDataList(type) {
      if (type === 0) {
        this.$store.dispatch("m_search/getSearchUserList", {
          type: "get",
          page: 0,
          limitCount: 6,
        });
      } else if (type === 1) {
        this.$store.dispatch("m_search/getSearchDiscussionList", {
          type: "get",
          page: 0,
          limitCount: 5,
        });
      } else {
        this.$store.dispatch("m_search/getSearchTeamList", {
          type: "get",
          page: 0,
          limitCount: 6,
        });
      }
    },
    // 搜索之前保存原来推荐列表
    saveRecommandData(type) {
      if (type === 0) {
        this.recommandState.recommandPeople = this.searchUserList;
      } else if (type === 1) {
        this.recommandState.recommandDiscussion = this.searchDiscussionList;
      } else {
        this.recommandState.recommandTeam = this.searchTeamList;
      }
    },
    // 搜索完成后设置原来推荐列表
    commitRecommandData(type) {
      if (type === 0) {
        // 组件更新是异步的，直接设置会导致无法监听到userlist变化，需要用nextTick
        this.$nextTick(() => {
          this.$store.commit(
            "m_search/setUserList",
            this.recommandState.recommandPeople
          );
        });
        // setTimeout(() => {}, 0); 使用宏任务依然可以实现
      } else if (type === 1) {
        this.$nextTick(() => {
          this.$store.commit(
            "m_search/setDiscussionList",
            this.recommandState.recommandDiscussion
          );
        });
      } else {
        this.$nextTick(() => {
          this.$store.commit(
            "m_search/setTeamList",
            this.recommandState.recommandTeam
          );
        });
      }
    },

    // 查询结果
    searchDataList(type) {
      if (type === 0) {
        this.$store.dispatch("m_search/getSearchUserList", {
          type: "query",
          name: this.searchContent,
        });
      } else if (type === 1) {
        this.$store.dispatch("m_search/getSearchDiscussionList", {
          type: "query",
          title: this.searchContent,
        });
      } else {
        this.$store.dispatch("m_search/getSearchTeamList", {
          type: "query",
          title: this.searchContent,
        });
      }
    },

    // 获取缓存历史
    getHistoryList(type) {
      if (type === 0) {
        this.historyList = JSON.parse(
          wx.getStorageSync("searchPeople") || "[]"
        );
      } else if (type === 1) {
        this.historyList = JSON.parse(
          wx.getStorageSync("searchDiscussion") || "[]"
        );
      } else {
        this.historyList = JSON.parse(wx.getStorageSync("searchTeam") || "[]");
      }
    },

    // 记录保存至缓存
    saveSearchToCache(type) {
      console.log(type);
      let search = [];

      if (type === 0) {
        search = JSON.parse(wx.getStorageSync("searchPeople") || "[]");
      } else if (type === 1) {
        search = JSON.parse(wx.getStorageSync("searchDiscussion") || "[]");
      } else {
        search = JSON.parse(wx.getStorageSync("searchTeam") || "[]");
      }

      if (search.includes(this.searchContent)) return;
      search.push(this.searchContent);
      if (type === 0) {
        wx.setStorageSync("searchPeople", JSON.stringify(search));
      } else if (type === 1) {
        wx.setStorageSync("searchDiscussion", JSON.stringify(search));
      } else {
        wx.setStorageSync("searchTeam", JSON.stringify(search));
      }
      this.historyList = search;
    },
  },
};
</script>

<style lang="scss" scoped>
.Search {
  width: 100vw;

  .title {
    font-weight: 700;
    font-size: 34rpx;
  }
  .topSearch {
    width: 95vw;
    margin: 0 auto;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    .inputBox {
      display: flex;
      align-items: center;
      background-color: #f0f0f0;
      padding: 10rpx 20rpx;
      border-radius: 5rpx;
      flex: 1;
    }

    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 15rpx;
    }
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 30rpx;
      height: 30rpx;
    }
  }
  .history {
    padding: 15rpx;
    .historyList {
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      .history-item {
        margin: 0 15rpx 15rpx 0;
        background-color: #f0f0f0;
        border-radius: 5rpx;
        color: #333333;
        font-size: 24rpx;
        padding: 10rpx;
      }
    }
  }
  .userList,
  .newList {
    padding: 15rpx;
  }
  .drawerContent {
    width: 70vw;
    height: 100vh;
  }
}
</style>

<style>
page {
  background-color: #fff;
}
</style>
